<script lang="ts" setup>
import { ref, onErrorCaptured } from 'vue'

const hasError = ref(false)
const error = ref<Error | null>(null)

onErrorCaptured((err: Error) => {
  hasError.value = true
  error.value = err
  console.error('Error captured in CustomErrorBoundary:', err)
  return false // 阻止错误继续传播
})
</script>

<template>
  <div>
    <slot v-if="!hasError"></slot>
    <div v-else class="error-boundary">
      <h2>Something went wrong.</h2>
      <p>{{ error?.message }}</p>
    </div>
  </div>
</template>

<style scoped>
.error-boundary {
  padding: 20px;
  border: 1px solid #f56c6c;
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>
